<template>
    <div class="sys-logger-table-list">
        <el-table
                ref="sysLoggerTable"
                :data="tableData"
                :height="tableHeight"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
                :default-sort="defaultSort">
            <el-table-column
                    type="selection"
                    show-overflow-tooltip
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="编号"
                    width="95"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户名"
                    width="105"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="employeeName"
                    label="员工姓名"
                    width="105"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="departmentName"
                    label="部门名称"
                    width="105"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="moduleName"
                    label="模块名称"
                    width="105"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="loginIP"
                    label="登录IP"
                    width="105"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="loginTime"
                    label="登录时间"
                    width="135"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="function"
                    label="功能"
                    width="90"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="operateTime"
                    label="操作时间"
                    width="135"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="operateStatus"
                    label="操作状态"
                    width="95"
                    :filters="operateStatusFilter"
                    :filter-method="filterOperateStatus"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag :type="operateStatusType(scope.row.operateStatus)" close-transition>
                        {{scope.row.operateStatus}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="terminalName"
                    label="终端名称"
                    width="105"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="exitTime"
                    label="退出时间"
                    width="135"
                    sortable>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "SysLoggerTableList",
        props: {
            tableHeight: {
                required: false,
                type: String,
                default: () => {
                    return "550"
                }
            },
            defaultSort: {
                required: false,
                type: Object,
                default: () => {
                    return {prop: 'number', order: 'descending'};
                }
            }
        },
        computed: {
            operateStatusFilter() {
                return [
                    {text: '操作成功', value: '操作成功', class: 'success'}, {text: '操作中', value: '操作中', class: ''},
                    {text: '未操作', value: '未操作', class: 'warning'}, {text: '操作失败', value: '操作失败', class: 'danger'}
                ]
            }
        },
        data() {
            return {
                multipleSelection: [],
                tableData: [{
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '操作成功',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }, {
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '操作成功',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }, {
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '操作成功',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }, {
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '操作中',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }, {
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '操作失败',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }, {
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '操作成功',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }, {
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '未操作',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }, {
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '操作成功',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }, {
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '操作成功',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }, {
                    number: '100021',
                    userName: 'lsx2020',
                    employeeName: '刘诗静',
                    departmentName: '人事部',
                    moduleName: '预约管理',
                    loginIP: '192.168.0.10',
                    loginTime: '2020-02-01 10:20',
                    function: '创建',
                    operateTime: '2020-02-01 10:30',
                    operateStatus: '操作成功',
                    terminalName: 'PC端',
                    exitTime: '2020-02-01 10:31'
                }],
            }
        },
        methods: {
            operateStatusType(operateStatus) {
                let res = _.filter(this.operateStatusFilter, item => {
                    return item.value === operateStatus ? item : null
                });
                return res && res.length && res[0].class;
            },
            /**
             * 状态过滤
             * @param value
             * @param row
             * @returns {boolean}
             */
            filterOperateStatus(value, row) {
                return row.operateStatus === value;
            },
            /**
             * 行背景色处理
             * @param row
             * @param rowIndex
             * @returns {string}
             */
            tableRowClassName({row, rowIndex}) {
                if (row.operateStatus === '未操作') {
                    return 'warning-row';
                } else if (row.operateStatus === '操作失败') {
                    return 'danger-row';
                } else if (row.operateStatus === '操作成功') {
                    return 'success-row';
                } else if (row.operateStatus === '操作中') {
                    return 'default-row';
                }
                return '';
            },
            /**
             * 选中行处理
             * @param val
             */
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style lang="scss">
    .sys-logger-table-list {

    }
</style>